<template>
	<div style="margin-top: 40px;">
		<div>
			<div class="editUserInfo">
				<div style="margin-right: 100px;">
					<span @click="selectAddress()">商家名称:</span>
					<span style="color: #0082E6;">{{form.storeName}}</span>
				</div>
				<div style="margin-right: 100px;">
					<span>用户名ID:</span>
					<span>{{form.adminCode}}</span>
				</div>
				<div style="margin-right: 100px;">
					<span>认证类型:</span>
					<span>{{ findSort(form.storeType) }}</span>
				</div>
				<div>
					<span>认证状态:</span>
					<span v-if="isMarker == '0'">未实名认证</span>
					<span v-if="isMarker == '2'">审核中</span>
					<span v-if="isMarker == '1'">已实名认证</span>
				</div>
			</div>
			<div style="background-color: #FFFFFF;margin-top: 20px;">
				<div style="background: #FFFFFF;;padding: 20px;margin-bottom: 0px;">
					账户信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="余额：">
						<el-input style="display: inline-block;width: 120px;" readonly v-model="form.amt"></el-input>
						<el-button   @click="submitForm" type="primary">提 现</el-button>
						<!-- <el-button v-else  disabled type="primary">提 现</el-button> -->
					</el-form-item>

				</el-form>
			</div>
			<br>
			<div style="background-color: #FFFFFF;margin-top: 20px;">
				<div style="background: #FFFFFF;;padding: 20px;margin-bottom: 0px;">
					待转账列表
				</div>
				<div>
					<el-row :span="24">
						<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
							<el-form-item label-width="130px" label="订单时间：">
								<el-date-picker type="date" placeholder="开始时间" v-model="startStoreTime" style="width:180px;"></el-date-picker>
								到
								<el-date-picker type="date" placeholder="结束时间" v-model="endStoreTime" style="width:180px;"></el-date-picker>
							</el-form-item>
							<el-button type="primary" @click="fetchData(1)">查询</el-button>
						</el-form>
					</el-row>
				</div>
				<div>
					<el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" style="width: 100%;">
						<el-table-column label="商户名称" prop='storeName'>
						</el-table-column>
						<el-table-column label="交易金额" prop='orderAmt'>
						</el-table-column>
						<el-table-column label="转账金额总额">
							<template scope="scope">
								<div>{{scope.row.orderDiscountAmt | moneyTwo}}</div>
							</template>
						</el-table-column>
						<el-table-column label="待转账金额">
							<template scope="scope">
								<div>{{scope.row.notTranferAmt | moneyTwo}}</div>
							</template>
						</el-table-column>
						<el-table-column label="已转账金额">
							<template scope="scope">
								<div>{{scope.row.tranferAmt | moneyTwo}}</div>
							</template>
						</el-table-column>
						<el-table-column label="冻结金额">
							<template scope="scope">
								<div>{{scope.row.frozenAmt | moneyTwo}}</div>
							</template>
						</el-table-column>

						</el-table-column>
						<el-table-column label="操作" width="180">
							<template scope="scope">
								<el-button type="primary" size="small" @click="navToDetail(scope.row)">明细
								</el-button>
								<el-button type="primary" size="small" @click="navToStoreCashList(scope.row)">提现记录
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<br>
			<div style="background-color: #FFFFFF;margin-top: 20px;">
				<div style="background: #FFFFFF;;padding: 20px;margin-bottom: 0px;">
					日统计明细
				</div>
				<div>
					<el-row :span="24">
						<el-form :inline="true" :model="formInlineToday" class="demo-form-inline" label-width="100px">
							<el-form-item label-width="130px" label="选择日期：">
								<el-select style="width: 166px;" v-model="formInlineToday.flag">
									<el-option v-for="item in flagList" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<el-date-picker type="date" placeholder="开始日期" v-model="startStoreTimeToday" style="width:180px;"></el-date-picker>
								到
								<el-date-picker type="date" placeholder="结束日期" v-model="endStoreTimeToday" style="width:180px;"></el-date-picker>
							</el-form-item>
							<el-form-item label="按转账状态:">
								<el-select v-model="formInlineToday.orderStatus" style="width: 180px;">
									<el-option v-for="item in orderStatusList" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
							<el-button type="primary" @click="fetchDataToday(1)">查询</el-button>
						</el-form>
					</el-row>
				</div>
				<div>
					<el-table :data="pageInfoToday.dtos" v-loading="table_loading" element-table_loading-text="加载中" style="width: 100%;">
						<el-table-column label="商户名称" prop='storeName'>
						</el-table-column>
						<el-table-column label="支付日期" prop='payTime'>
						</el-table-column>

						<el-table-column label="收货日期" prop='okTime'>
						</el-table-column>
						<el-table-column label="转账日期" prop='tranferTime'>
						</el-table-column>
						<el-table-column label="交易金额" prop='orderAmt'>
						</el-table-column>
						<el-table-column label="转账金额总额">
							<template scope="scope">
								<div>{{scope.row.orderDiscountAmt | moneyTwo}}</div>
							</template>
						</el-table-column>
						<el-table-column label="待转账金额">
							<template scope="scope">
								<div>{{scope.row.notTranferAmt | moneyTwo}}</div>
							</template>
						</el-table-column>
						
						<el-table-column label="冻结金额" >
							<template scope="scope">
								<div>{{scope.row.frozenAmt | moneyTwo}}</div>
							</template>
						</el-table-column>
						<el-table-column label="转账状态">
							<template scope="scope">
								<p v-if="scope.row.orderStatus == 'N'">待转账</p>
								<p v-if="scope.row.orderStatus == 'Y'">已转账</p>
							</template>
						</el-table-column>

							<!-- 	<el-table-column label="操作">
							<template scope="scope">
								<el-button type="primary" size="small" @click="navToDetail(scope.row)">明细
								</el-button>
								<el-button type="primary" size="small" @click="navToStoreCashList(scope.row)">提现记录
								</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<div class="paginate">
						<el-pagination @current-change="handleCurrentTodayChange" :current-page="pageInfoToday.pageNum" :page-size="pageInfoToday.pageSize"
						 layout="total, prev, pager, next, jumper" :total="pageInfoToday.count">
						</el-pagination>
					</div>
				</div>
			</div>
			<br>
		</div>
		<el-dialog title="提现" :visible.sync="dialogVisibleCash" width="30%" :before-close="handleClose">
			<div style="font-size: 18px;">
				<el-form :model="formCash" class="demo-form-inline">
					<el-form-item label-width="130px" label="账户余额：">
						<el-input style="width: 120px;" readonly v-model="form.amt"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="提现金额余额：">
						<el-input style="width: 120px;" v-model="formCash.transferAmount"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="银行卡手机号：">
						<el-input style="display: inline-block;width: 120px;" v-model="phone"></el-input>
						<el-button id="code" @click="getcode()" :disabled="cantclick == true" size="small" style="display: inline-block;height:4.8vh">获取验证码</el-button>
					</el-form-item>
					<el-form-item label-width="130px" label="验证码：">
						<el-input style="display: inline-block;width: 120px;" v-model="phoneCode"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel()">取 消</el-button>
				<el-button type="primary" @click="confirmCash()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="认证结果" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div style="text-align: center;font-size: 18px;">
				<span>你暂未实名认证</span>
				<span @click="navVerfiy()" style="color: #0000CC;cursor: pointer;text-align: center;">前往认证</span>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel()">取 消</el-button>
				<el-button type="primary" @click="confirm()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog custom-class="newDialog" title="转账明细" :visible.sync="dialogVisibleCashList" width="45%">
			<div style="font-size: 18px;">
				<div>
					<el-row :span="24" style="margin:10px 0 0;">
						<el-form :inline="true" :model="formInlineCash" class="demo-form-inline" label-width="100px">
							<el-form-item label="时间:">
								<el-select style="width: 166px;" v-model="formInlineCash.flag">
									<el-option v-for="item in flagList" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<el-date-picker type="date" placeholder="开始时间" v-model="startTimeCash" style="width:180px;"></el-date-picker>
								到
								<el-date-picker type="date" placeholder="结束时间" v-model="endTimeCash" style="width:180px;"></el-date-picker>
							</el-form-item>
							<el-form-item label="按转账状态:">
								<el-col :span="18">
									<el-select v-model="formInlineCash.orderStatus">
										<el-option v-for="item in orderStatusList" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-col>

							</el-form-item>
							<el-button type="primary" @click="fetchDataCash(1)">查询</el-button>
							<el-button type="primary" @click="deriveSubmitCash()">导出</el-button>
						</el-form>
					</el-row>
				</div>
				<el-table :data="pageInfoCash.dtos" v-loading="table_loadingCash" element-table_loading-text="加载中" style="width: 100%;">
					<el-table-column label="商品名称" width="200" prop='goodsName'>
						<template scope="scope">
							<div style="display: flex;justify-content: space-between;padding: 10px;">
								<span style="align-self: center;">{{scope.row.goodsName}}</span>
								<img style="width: 80px;" :src="scope.row.goodsIcon" alt="">
							</div>
						</template>
					</el-table-column>
					<el-table-column label="商品数量" prop='goodsNum'>
					</el-table-column>

					<el-table-column label="商户金额" prop='orderDiscountAmt'>
					</el-table-column>
					<el-table-column label="交易金额" prop='orderAmt'>
					</el-table-column>
					<el-table-column label="确认时间" prop='okTime'>
					</el-table-column>

					<el-table-column label="订单状态">
						<template scope="scope">
							<p v-if="scope.row.orderState == 'W'">已完成</p>
							<p v-if="scope.row.orderState == 'C'">交易关闭</p>
							<p v-if="scope.row.orderState == 'Z'">交易中</p>
						</template>
					</el-table-column>
					<el-table-column label="转账状态">
						<template scope="scope">
							<p v-if="scope.row.orderStatus == 'N'">待转账</p>
							<p v-if="scope.row.orderStatus == 'Y'">已转账</p>
						</template>
					</el-table-column>
					<!-- 						<el-table-column label="操作">
								<template scope="scope">
									<el-button type="primary" size="small" @click="navToCash(scope.row)">提现
									</el-button>
								</template>
							</el-table-column> -->
				</el-table>
				<div class="paginate">
					<el-pagination @current-change="handleCurrentCashChange" :current-page="pageInfoCash.pageNum" :page-size="pageInfoCash.pageSize"
					 layout="total, prev, pager, next, jumper" :total="pageInfoCash.count">
					</el-pagination>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formCash: {
					transferAmount: '',
				},
				cashShow: false,
				phone: '',
				phoneCode: '',
				firstCode: '',
				isMarker: '',
				dialogVisible: false,
				form: {},
				amt: '',
				cantclick: false,
				dialogVisibleCash: false,
				typeList: [{
					text: '物流商超',
					value: '1'
				}, {
					text: '服务行业',
					value: '2'
				}, {
					text: '酒店',
					value: '3'
				}],
				formInline: {
					pageNum: 1,
					pageSize: 10,
					storeId: '',
					storeName: '',
					orderStatus: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'T.ok_time',
					desc: 'desc',
				},
				startTime: '',
				endTime: '',
				startStoreTime: '',
				endStoreTime: '',
				pageInfo: {
					pageNum: 1,
					pageSize: 20,
					count: 1,
					dtos: []
				},
				table_loading: false,
				dialogVisibleCashList: false,
				table_loadingCash: false,
				formInlineCash: {
					pageNum: 1,
					pageSize: 10,
					storeId: '',
					storeName: '',
					orderStatus: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'pay_time',
					desc: 'desc',
					flag: ''
				},
				orderStatusList: [{
					value: '',
					label: '全部'
				}, {
					value: 'N',
					label: '未转账'
				}, {
					value: 'Y',
					label: '已转账'
				}],
				flagList: [
					{
						value: '0',
						label: '按付款时间'
					}, {
						value: '1',
						label: '按收货时间'
					},
					{
						value: '2',
						label: '按已转账时间'
					},
					{
						value: '3',
						label: '按待转账时间'
					}
				],
				startTimeCash: '',
				endTimeCash: '',
				pageInfoCash: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				pageInfoToday: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				formInlineToday: {
					pageNum: 1,
					pageSize: 10,
					orderStatus: '',
					storeId: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'T.pay_time',
					desc: 'desc',
					flag: ''
				},
				startStoreTimeToday: '',
				endStoreTimeToday: ''
			}
		},
		filters: {
		      moneyTwo(val) {
				  console.log(val)
				  let money = Math.floor(val * 100) / 100 
				  return money
		      }
		    },
		created() {
			this.getMarkerInfo()
			this.form = JSON.parse(sessionStorage.getItem('permission'))
			this.formInline.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.formInlineToday.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.fetchData(1)
			this.fetchDataToday(1)
		},
		methods: {
			// 待转账列表
			fetchData(page = 1) {
				let vm = this
				vm.table_loading = true
				vm.pageInfo.pageNum = page
				vm.formInline.pageNum = page
				if (vm.startStoreTime && vm.endStoreTime) {
					vm.formInline.okTimeStart = dateFormat(vm.startStoreTime)
					vm.formInline.okTimeEnd = dateFormat(vm.endStoreTime).substring(0,11) + '23:59:59'
					if (vm.formInline.okTimeStart > vm.formInline.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInline.okTimeStart = ''
					vm.formInline.okTimeEnd = ''
				}
				vm.dataApi.ajax('tranferSumList', vm.formInline, res => {
					vm.table_loading = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfo.dtos = data.lists
					vm.pageInfo.count = data.pageCount
				});
			},
			handleCurrentChange(val) {
				this.fetchData(val)
			},
			// 日统计明细
			fetchDataToday(page = 1) {
				let vm = this
				vm.table_loading = true
				vm.pageInfoToday.pageNum = page
				vm.formInlineToday.pageNum = page
				if (vm.startStoreTimeToday && vm.endStoreTimeToday) {
					
					vm.formInlineToday.okTimeStart = dateFormat(vm.startStoreTimeToday)
					vm.formInlineToday.okTimeEnd = dateFormat(vm.endStoreTimeToday).substring(0,11) + '23:59:59'
					if (vm.formInlineToday.okTimeStart > vm.formInlineToday.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInlineToday.okTimeStart = ''
					vm.formInlineToday.okTimeEnd = ''
				}
				vm.dataApi.ajax('tranferSumOneList', vm.formInlineToday, res => {
					vm.table_loading = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfoToday.dtos = data.lists
					vm.pageInfoToday.count = data.count
				});
			},
			handleCurrentTodayChange(val) {
				this.fetchDataToday(val)
			},
			// 明细列表
			navToDetail(data) {
				this.formInlineCash.storeId = data.storeId
				this.dialogVisibleCashList = true
				this.fetchDataCash(1)
			},
			handleCurrentCashChange(val) {
				this.fetchDataCash(val)
			},
			fetchDataCash(page = 1) {
				let vm = this
				if (vm.startTimeCash && vm.endTimeCash) {
					vm.formInlineCash.okTimeStart = dateFormat(vm.startTimeCash)
					vm.formInlineCash.okTimeEnd = dateFormat(vm.endTimeCash)
					if (vm.formInlineCash.okTimeStart > vm.formInlineCash.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInlineCash.okTimeStart = ''
					vm.formInlineCash.okTimeEnd = ''
				}
				vm.table_loadingCash = true
				vm.pageInfoCash.pageNum = page
				vm.formInlineCash.pageNum = page
				vm.dataApi.ajax('tranferOrderList', vm.formInlineCash, res => {
					vm.table_loadingCash = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfoCash.dtos = data.lists
					vm.pageInfoCash.count = data.count
					vm.pageInfoCash.pageNum = data.pageNum
				});
			},
			navToStoreCashList(item) {
				this.$router.push({
					path: '/shop/cash_history_list'
				})
			},
			getcode() {
				if (!this.phone) {
					this.$message({
						message: '请输入手机号',
						type: 'warning'
					});
					return;
				}
				var _this = this
				var data = {
					phone: this.phone,
					yzm: 'YZM'
				}
				this.dataApi.ajax('sendMessage', data, res => {
					if (res.responseType === 'S') {
						this.firstCode = res.code
						var i = 60;
						var Code = document.getElementById("code");
						var timer = setInterval(function() {
							if (i == 0) {
								Code.innerText = "获取验证码"
								// Code.style.backgroundColor='#0AC0EF';

								clearInterval(timer)
								_this.cantclick = false

							} else {
								Code.innerText = Math.floor(i) + '秒';
								--i;
								Code.style.width = '80px';
								_this.cantclick = true;
							}
						}, 1000);
					}
				})
			},
			confirmCash() {
				let vm = this
				if (vm.formCash.transferAmount > vm.form.amt) {
					vm.showMsg('提现金额不能大于余额')
					return
				}
				if (vm.phoneCode != vm.firstCode) {
					vm.showMsg('验证码错误')
					return
				}

				let data = {
					userId: JSON.parse(sessionStorage.getItem('permission')).adminCode,
					transferAmount: vm.formCash.transferAmount,
					yzm: vm.phoneCode
				}
				vm.dataApi.ajax('storeWithraw', data, res => {
					if (res.responseType == 'S') {
						vm.showMsg('发起提现请求成功')
						vm.goBack()
					}

				})

			},
			getMarkerInfo() {
				let vm = this
				let data = {
					userId: JSON.parse(sessionStorage.getItem('permission')).adminCode
				}

				vm.dataApi.ajax('storeAmtSelect', data, res => {
					if (res.responseType == 'S') {
						vm.isMarker = res.isMarker
						vm.amt = res.amt
						vm.form.amt = res.amt
					}

				})
			},
			findSort(type) {
				for (var i = this.typeList.length - 1; i >= 0; i--) {
					if (type == this.typeList[i].value) {

						return this.typeList[i].text
					}
				}
			},
			handleClose() {
				this.cancel()
			},
			cancel() {
				this.dialogVisible = false
				this.dialogVisibleCash = false
			},
			confirm() {
				this.dialogVisible = false
			},
			navVerfiy() {
				this.$router.push('/shop/autonym_verify')
			},
			submitForm() {
				let vm = this
				if (vm.isMarker == '0') {
					vm.dialogVisible = true
					return
				}
				if (vm.isMarker == '2') {
					vm.showMsg('认证信息审核中')
					return
				}
				if (vm.form.amt == 0) {
					vm.showMsg('余额为零，暂无法提现')
					return
				}
				vm.dialogVisibleCash = true
			}, 
			deriveSubmitCash() {
				let vm = this
				let okTimeStart = ''
				let okTimeEnd = ''
				let orderStatus = vm.formInlineCash.orderStatus
				let storeName = vm.formInlineCash.storeName
				let storeId = vm.formInlineCash.storeId
				if (vm.startTimeCash > vm.endTimeCash) {
					this.showMsg('开始时间不能大于结束时间', 'warning');
					return;
				}

				if (vm.startTime && vm.endTime) {
					okTimeStart = dateFormat(vm.startTimeCash)
					okTimeEnd = dateFormat(vm.endTimeCash)
				}
				// if (!vm.startTime&&vm.endTime) {
				//   okTimeEnd = ''
				// }
				let host = 'https://console.hzsuhu.cn/enve'
				location.href = encodeURI(encodeURI(host + "/WithdrawControl/exportTransfer?okTimeStart=" + okTimeStart +
					'&okTimeEnd=' + okTimeEnd + '&orderStatus=' + orderStatus + '&storeName=' + storeName + '&storeId=' + storeId))
			}
		}
	}
</script>

<style>
	.editUserInfo {
		display: flex;
		justify-content: flex-start;
		padding: 20px;
		background-color: #FFFFFF;
		margin-top: 20px;

	}

	.newDialog .el-dialog__body {
		padding-top: 10px !important;
	}

	.newDialog .el-form-item {
		margin-bottom: 5px;
	}

	.newDialog .el-form-item__label {
		text-align: right;
	}
</style>
